import WeCropper from '../../dist/we-cropper/we-cropper.js'
const app = getApp()

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

Page({
  data: {
    cropperOpt: {
      id: 'cropper',
      targetId: 'targetCropper',
      pixelRatio: device.pixelRatio,
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - width) / 3,
        y: (height - (400 / 750) * width) / 5,
        width: width,
        height: width
      },
      boundStyle: {
        color: "green",
        mask: 'rgba(0,0,0,0.8)',
        lineWidth: 1
      }
    }
  },
  touchStart(e) {
    this.cropper.touchStart(e)
  },
  touchMove(e) {
    this.cropper.touchMove(e)
  },
  touchEnd(e) {
    this.cropper.touchEnd(e)
  },

  //当点击生成图片按钮的时候，得到图片的src后，调用wx.uploadFile()上传图片，成功后可以再跳转到想要去的页面
  getCropperImage() {
    this.cropper.getCropperImage()
      .then((src) => {
        let that = this
        wx.showLoading({
          title: '裁剪中...',
        })
        wx.uploadFile({
          url: app.globalData.Url + 'upload-activity-img',
          filePath: src,
          name: 'file',
          header: {
            'Authorization': wx.getStorageSync('userInfo').token
          },
          success(resc) {
            let res = JSON.parse(resc.data)
            if (res.code === 0) {
              wx.hideLoading()
              var pages = getCurrentPages()
              if (pages.length > 1) {
                var prePage = pages[pages.length - 2]
                let data = {
                  state: 3,
                  content: [res.data.url]
                }
                let formList = prePage.data.formList
                if (!that.data.activeIndex) {
                  formList.push(data)
                } else {
                  formList[that.data.activeIndex].content.push(res.data.url)
                }
                prePage.setData({
                  formList
                })
              }
              wx.navigateBack({
                delta: 1,
              })

            } else if (res.code === 3015 || res.code === 3016) {
              wx.showToast({
                title: '不能包含敏感图片',
                icon: "none"
              })
            }

          }
        })
      })
      .catch((err) => {
        wx.showModal({
          title: '温馨提示',
          content: err.message
        })
      })
  },

  uploadTap(e) {
    const self = this
    self.cropper.pushOrign(e)
  },


  // 取消返回
  cancelTap() {
    wx.navigateBack({
      delta: 1,
    })
  },
  onLoad(option) {
    this.setData({
      activeIndex: parseInt(option.activeIndex)
    })
    console.log(wx.getSystemInfoSync().windowWidth);

    const {
      cropperOpt
    } = this.data
    cropperOpt.boundStyle.color = "green"
    this.setData({
      cropperOpt
    })
    this.cropper = new WeCropper(cropperOpt)
      .on('ready', (ctx) => {
        console.log(`wecropper is ready for work!`)
      })
      .on('beforeImageLoad', (ctx) => {
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        wx.hideToast()
      })
    this.uploadTap(option.src)
  }
})